<template>
  <a-card :bordered="false">

    <a-form layout="inline">
      <a-row :gutter="24">


        <a-col :md="6" :sm="8">
          <a-form-item :label="$t('statisticalReport.yearMonth')">

            <a-date-picker
              :placeholder="$t('base.pleaseChoose')"
              v-model="monthModelValue"
              @change="monthChange"
            />

          </a-form-item>
        </a-col>
        <a-col :md="4" :sm="6">
          <a-button style="margin-top: 2px" type="primary" icon="search" @click="chartSearch"> {{$t('base.query')}} </a-button>
          <a-button style="margin-top: 2px;margin-left: 8px" type="primary" icon="reload" @click="chartSearchReset"> {{$t('base.reset')}} </a-button>
        </a-col>
      </a-row>
    </a-form>

    <line-chart-multid class="statistic" :title="$t('statisticalReport.crowdMonitoring')" :dataSource="countSource" :fields="countFields" :aliases="countAliases" :height="400"/>

  </a-card>
</template>

<script>
  import Bar from '@/components/chart/Bar'
  import Pie from '@/components/chart/Pie'
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import ACol from 'ant-design-vue/es/grid/Col'
  import { getAction } from '@/api/manage'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import JInput from '@/components/jeecg/JInput'
  import { httpAction } from '@/api/manage'
  import JDate from '@/components/jeecg/JDate'
  import moment from 'moment'//导入文件

  export default {
    name: 'GlrHkBoxDataDay',
    mixins:[JeecgListMixin],
    components: {
      ACol,
      Bar,
      Pie,
      JInput,
      JDate,
      LineChartMultid,
    },
    data() {
      return {
        description: this.$t('statisticalReport.crowdMonitoring') ,
        monthModelValue:moment(),
        monthValue: [],
        bFirst:true,  //第一次打开图表页面就查询一下
        // 数据集
        countSource: [],
        countFields: [],
        countAliases: [],
        disableMixinCreated:true,
        url: {
          lightReportChart:"/glr/glrSensorData/tBHkBoxTaskChartData",
        },
      }
    },
    created() {
      this.monthValue=moment(new Date()).format("YYYY-MM-DD")
      this.loadDate(this.url.lightReportChart,'year',{ligCode:'',gatawayCode:'',yearMonth:this.monthValue});
    },
    methods: {
      loadDate(url,type,param) {
        getAction(url,param,'get').then((res) => {
          this.countFields=['motor','nonmotor','human'];
          this.countAliases=[
            {field:'motor',alias: this.$t('statisticalReport.motor')  },
            {field:'nonmotor',alias: this.$t('statisticalReport.nonmotor')},
            {field:'human',alias: this.$t('statisticalReport.human') }
            ]
          let dateList=res.list;
          let bb=[]
          for(var j = 0,len=dateList.length; j < len; j++) {
           let aa={ type: dateList[j].s_nap_time1+':00', motor: dateList[j].motor, nonmotor: dateList[j].nonmotor, human: dateList[j].human };
           bb.push(aa);
          }
          this.countSource=bb;
        })
      },

      // 按月份查询
      chartSearch(){
        this.loadDate(this.url.lightReportChart,'year',{ligCode:'',gatawayCode:'',yearMonth:this.monthValue});
      },
      chartSearchReset(){
        this.monthModelValue=moment();
        this.monthValue=moment(new Date()).format("YYYY-MM-DD")
        this.loadDate(this.url.lightReportChart,'year',{ligCode:'',gatawayCode:'',yearMonth:this.monthValue});
      },
      // 选择月份日期
      monthChange(value, mode) {
        this.monthValue = mode
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  .statistic {
    padding: 0px !important;
    margin-top: 50px;
  }

  .statistic h4 {
    margin-bottom: 20px;
    text-align: center !important;
    font-size: 24px !important;;
  }

  .statistic #canvas_1 {
    width: 100% !important;
  }
</style>